<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <meta name = "format-detection" content="telephone = no" />
    <link rel="shortcut icon" href="img/smlogo.png" type="image/x-icon">
    <meta charset="UTF-8">
    <meta name = "format-detection" content="telephone = no" />
    <title>屏蔽管理</title>
    <link rel="stylesheet" href="css/index2.css"/>
    <style>
         body{
             font-size: 16px;
             width:100%;
             box-sizing: border-box;
             overflow-x: hidden;
             /*height:100%;*/
         }
         nav{
             width:100%;
             box-sizing: border-box;
             background: #f3f3f3;
             background-image: linear-gradient(to bottom,#f3f3f3,#ebebeb);
             box-shadow: 0 1px 1px rgba(0,0,0,.3);
         }
         nav>a{
            border: #cacaca solid 1px;
            color: #5d5d5d;
            border-color: #cacaca #cacaca #f9f9f9 #f9f9f9;
            border-top: 0;
            border-bottom: 0;

            width: 33%;
            font-size: .8125rem;
            text-shadow: 0 1px 0 rgba(255,255,255,.75);

            position: relative;
            line-height: 35px;
            text-align: center;
            display: inline-block;
            box-sizing: border-box;
        }
         nav>a:nth-child(2){
             width:34%;
         }
         nav>a:first-child{
             border-left:none;
         }
         nav>a:last-child{
             border-right:none;
         }
         a:visited {
             color: #517daf;
         }
         a.active{
             background: rgba(0,0,0,.05);
         }
        /*页面主体部分*/
         #keywordplace,#urlplace,#newsplace{
             background: #ECECEC;
         }

        /*输入框部分*/
        .tit{
            margin: 16px 7px 4px;
            padding-top:5px;
            font-size: .875rem;
            font-weight: 400;
        }
         .tit span{
             color: orange;
         }
         .tit p{
             padding-left:5px;
             font-size: .75rem;
             color: #aaa;
             display: inline-block;
         }
        .addinputplace{
            overflow: hidden;
            margin: 0 7px;
        }
         .addinputplace>p{
             margin: 0 51px 0 0;
         }
         .addinputplace>a{
             float: right;
             width: 43px;
             line-height: 29px;
             font-size: .75rem;
             color: #5d5d5e;

             /**/
             border: #c5c6c6 solid 1px;
             border-color: #c5c6c6 #bdbebe #b6b6b6;
             color: #5d5d5d;
             text-align: center;
             background-color: #f2f2f2;
             /**/
             box-shadow: 0 1px 2px rgba(0,0,0,.06),inset 0 1px rgba(255,255,255,.56);
             text-shadow: 0 1px 0 rgba(255,255,255,.65);
             border-radius: 5px;
             background-image: linear-gradient(to bottom,#f2f2f2 0,#dfdfdf 92%,#e8e8e8 100%);
         }
        .addinputplace>p>input{
            border: #bfbfbf solid 1px;
            padding: 5px 0;
            width: 100%;
            text-indent: 5px;
            /**/
            border-radius: 3px;
            border: #bfbfbf solid 1px;
            width: 100%;
            text-indent: 5px;
            /**/
            box-shadow: 0 1px 0 #eee,inset 0 1px 1px rgba(203,203,203,.53);
            font-size: 14px;
        }
         .addinputplace>p>input::-webkit-input-placeholder{
             color: #A9A9A9;
         }
         .addinputplace>p>input::-moz-placeholder{
             color: #A9A9A9;
         }
        .label-info{
            margin: 0 7px;
            font-size: .75rem;
            color: #aaa;
        }
        .item{
            padding: 11px 15px 8px;
            border-color: #dadada;
            color: #333;
            position: relative;
            height:22px;
        }
        .item div{
            position: absolute;
            left:15px;
            right:60px;
            white-space:nowrap;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            overflow: hidden;
        }
        .listplace{
            overflow-x: hidden;
            overflow-y: scroll;
        }
         .listplace>div{
             background-color: #fff;
             margin: 0 7px 18px;
             border-radius: 3px;
             box-shadow: 0 1px 1px rgba(0,0,0,.2);
             font-size: .9275rem;
         }
        .item a{
            position:absolute;
            right: 10px;
            top:9px;
            border:1px solid #eaeaea;
            font-size: .75rem;
            padding:2px 11px;
            border-radius:3px;
            background-image: linear-gradient(to bottom,#F7F7F7 0,#EBEBEB 92%,#E5E5E5 100%);
        }
        /*新闻*/
         #newsplace>div.item{
             background: #fff;
             margin: 0 7px 18px;
             padding: 11px 15px 8px;
             border-color: #dadada;
             color: #333;
             border-radius: 3px;
             box-shadow: 0 1px 1px rgba(0,0,0,.2);
         }
         /*网址*/
         #urlplace>div.item {
             background: #fff;
             margin: 0 7px 18px;
             padding: 11px 15px 8px;
             border-color: #dadada;
             color: #333;
             border-radius: 3px;
             box-shadow: 0 1px 1px rgba(0,0,0,.2);
         }
        /**/
        #page_wrapper{
            margin-top:88px;
        }
    </style>
</head>
<body class=" experiment-lookup_bar-on gating-feed_switcher_bar-on mweb  gating-new_mweb_header_logged_out-off" id="scoredetialpage">
    <div class="PageWrapper mweb" id="page_wrapper">
        <!-- 头部导航条-->
        <div class="Header">
            <div class="fixed_header" style="height:44px;">
                <div class="header_main" style="height:44px;overflow: hidden;">
                    <button class="mweb_modal_back_button" id="gobackbtn"></button>
                    <div class="header_action_buttons" style="left:30px;">
                        <div class="page_title" style="padding-left:5px;">屏蔽管理</div>
                    </div>
                </div>
                <nav>
                    <a href="javascript: ;" id="shieldnewsbtn" class="active">
                        屏蔽新闻</a><a href="javascript: ;" id="shieldurlbtn">
                    屏蔽网址</a><a href="javascript: ;" id="shieldkeywordbtn">屏蔽关键词</a>
                </nav>
            </div>
        </div>
        <!-- 新闻-->
        <div id="newsplace" style="display: block;">
            <div class="item">
                您可以在新闻页面屏蔽新闻。
            </div>
            <h2 class="tit">已屏蔽<span class="num">0</span>个新闻<p>(最多可以屏蔽 <span>100</span>个)</p></h2>
            <div class="newslistplace listplace">
                <div class="item noone" style="display: block">您还没有屏蔽任何新闻哟～</div>
            </div>
        </div>
        <!-- 网址-->
        <div id="urlplace" style="display: none">
            <div class="item">
                您可以在新闻页面屏蔽网站。
            </div>
            <!--<h2 class="tit">添加网站</h2>-->
            <!--<div class="addinputplace">-->
                <!--<a href="javascript: ;" id="addurlbtn">添加</a>-->
                <!--<p>-->
                    <!--<input type="url"  placeholder="输入您想屏蔽的网站地址" id="addurlinput"/>-->
                <!--</p>-->
            <!--</div>-->
            <!--<div class="label-info">-->
                <!--网址与名称之间请用 , 分隔  例：http://www.xxx.com,某一网-->
            <!--</div>-->

            <h2 class="tit">已屏蔽<span class="num">0</span>个网站<p>(最多可以屏蔽 <span>100</span>个)</p></h2>
            <div class="urllistplace listplace">
                <div class="item noone" style="display: block">您还没有屏蔽任何网站哟～</div>
            </div>
        </div>
        <!-- 关键词-->
        <div id="keywordplace" style="display:none">
            <h2 class="tit">添加关键词</h2>
            <div class="addinputplace">
                <a href="javascript: ;" id="addkeywordbtn">添加</a>
                <p>
                    <input type="text" maxlength="10" placeholder="输入您想屏蔽的关键词" id="addkeywordinput"/>
                </p>
            </div>
            <div class="label-info">
                每个关键词长度不能超过10个字符。
            </div>

            <h2 class="tit">已屏蔽<span class="num">0</span>个关键词<p>(最多可以屏蔽 <span>100</span>个)</p></h2>
            <div class="keywordlistplace listplace">
                <div class="item noone" style="display: block">您还没有屏蔽任何关键词哟～</div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/tohref.js"></script>
    <script src="ftnjs/urlnote.js"></script>
    <script src="js/shieldpage.js"></script>
</body>
</html>